import React from 'react';
import {connect} from "dva";

class SimpleComponent extends React.Component { //视图，react
  handleAdd = () => { //自定义事件处理方法，响应onClick事件
    this.props.dispatch({type:"simple/add"});//发送指定事件。事件类型type，由命名空间simple和行为add组成。简单理解，对simple数据库实例进行add操作
  }

  handleMinus = () => {
    this.props.dispatch({type:"simple/minus"});
  }

  handleRandom = () => {
    this.props.dispatch({type:"simple/random_request"});
  }

  handleReset = () => {
    this.props.dispatch({type:"simple/reset_request"});
  }

  render() {
    return (
      <div className={"container"}>
        <h2>{ this.props.num }</h2>
        <button type="button" name="+" onClick={this.handleAdd}>+</button>
        <button type="button" name="-" onClick={this.handleMinus}>-</button>
        <button type="button" name="random" onClick={this.handleRandom}>random</button>
        <button type="button" name="reset" onClick={this.handleReset}>reset</button>
      </div>
    );
  }
}

const mapStateToProps = (model) => {
  console.log(model);
  return {num: model.simple}; //model.namespace（数据库服务器.数据库实例名称），model.simple => this.props.num
}

export default connect(mapStateToProps)(SimpleComponent); //mapStateToProps绑定数据，mapDispatchToProps绑定方法（具体实现，略）。简单理解，connect会查下数据库找到所需数据，然后把所需数据绑定到子组件Component的props上
